Checklist
You can edit 8 Components for free. Get premium for unlimited access.
Choose between Figma, SwiftUI, React Native or Jetpack Compose Documentation.
Figma
The Checklist component is used to select one or more items in a list.
1. Reference
This component inherits props from the Checklist.
2. Type
You can edit the type with the title, checkbox or radioButton parameter.
Image 2.1 : Type title
Image 2.2 : Type checkbox
Image 2.3 : Type radioButton
3. State
You can edit the state with the default or disabled parameter.
Image 3.1 : State default
Image 3.2 : State disabled
SwiftUI
The DLChecklist is a SwiftUI component designed to display a checklist item with a title and either a radio button or checkbox. It supports different states for interaction, including normal, disabled, and title-only styles.
1. Reference
This component inherits props from the Checklist.
-
-
-
2. Type
You can edit the type with the .title, .checkbox or .radioButton parameter.
Checklist
Checklist
Checklist
title: "Checklist",
type: .title,
isActive: .constant(false)
)
DLCheckList(
title: "Checklist",
type: .checkbox,
state: .normal,
isActive: $isActive
)
DLCheckList(
title: "Checklist",
type: .radioButton,
state: .normal,
isActive: $isActive
)
3. State
You can edit the state with the .normal or .disabled parameter.
Checklist
Checklist
title: "Checklist",
type: .checkbox,
state: .disabled,
isActive: $isActive
)
DLCheckList(
title: "Checklist",
type: .radioButton,
state: .disabled,
isActive: $isActive
)
4. radioButtonState
You can edit the radioButtonState with the .normal or .disabled parameter.
Checklist
Checklist
title: "Checklist",
type: .radioButton,
state: .disabled,
isActive: $isActive,
radioButtonState: .disabled
)
DLCheckList(
title: "Checklist",
type: .radioButton,
state: .normal,
isActive: $isActive,
radioButtonState: .disabled
)
5. checkboxState
You can edit the checkboxState with the .normal or .disabled parameter.
Checklist
Checklist
title: "Checklist",
type: .checkbox,
state: .disabled,
isActive: $isActive,
radioButtonState: .disabled
)
DLCheckList(
title: "Checklist",
type: .checkbox,
state: .normal,
isActive: $isActive,
radioButtonState: .disabled
)
Jetpack Compose
The Checklist is a component designed to display a checklist item with a title and either a radio button or checkbox. It supports different states for interaction, including normal, disabled, and title-only styles.
1. Reference
This component inherits props from the Checklist.
-
-
-
2. Type
You can edit the type with the ChecklistType.title, ChecklistType.radioButton or ChecklistType.checkbox parameter.
Checklist
Checklist
Checklist
title = "Checklist"
)
Checklist(
title = "Checklist",
type = ChecklistType.radioButton,
isCheck = remember {
mutableStateOf(value:false)
}
)
Checklist(
title = "Checklist",
type = ChecklistType.checkbox,
isCheck = remember {
mutableStateOf(value:false)
}
)
3. State
You can edit the state with the ChecklistState.default or ChecklistState.disabled parameter.
Checklist
Checklist
title = "Checklist",
type = ChecklistType.checkbox,
state = ChecklistState.disabled,
isCheck = remember {
mutableStateOf(value:false)
}
)
Checklist(
title = "Checklist",
type = ChecklistType.radioButton,
state = ChecklistState.disabled,
isCheck = remember {
mutableStateOf(value:false)
}
)
React Native
This component is on the roadmap and in Progress This means that it is currently being edited and will be published in the next few weeks/months. Check back often to stay informed about the latest updates.
🚧
Discover more content
You have questions or need help?
You want to try?
Save time and money?