HelixOverviewDocsComponentsSandboxTheme builderCortexDocsEngramBuildingTraceBuildingRecallDeclaredServicesInsightsGet in touchSource on GitHub
Loading the reference
Color InputView SourceEdit in SandboxView MarkdownCopy MarkdownOpen in ClaudeOpen in CursorA color, typed in any syntax or picked from a panel.ExperimentalSince 0.1.0FormsUsageimport'@fusion.dev/helix/color-input'import'@fusion.dev/helix-headless/color-input'Preview
API ReferenceRoothelix-color-inputA color, typed in any syntax or picked from a panel.
PropTypeDefaultDescriptionalphabooleanfalseWhether the color carries an alpha channel.autocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.formatColorFormatThe syntax the value is written in: `hex`, `rgb` or `hsl`.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.namestring""Name submitted with the form.noFormatbooleanfalseWhether the reader may change the format from the panel.openbooleanWhether the element is open.placeholderstring"#000000"What the field says before a color is in it.requiredbooleanfalseWhether the form refuses to submit without it.swatchesstring""Colors offered under the picker, as a comma-separated list.triggerLabelstring"Choose a color"Accessible name for the control that opens the panel.valuestringWhat the control holds now, and what its form submits.variant"swatch"Whether the field is a text box with a swatch on it, or only the swatch.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendContent at the trailing end, before the trigger.feedbackWhat is wrong with it.hintHelp under the field.startContent at the leading end of the field, inside its border.triggerThe mark on the field saying a panel opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the color changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input carrying the value. Absent in `swatch`.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe color picker inside it.picker-actionsThe group holding the eyedropper and the syntax toggle.picker-channelOne ramp.picker-channel-controlThe range input.picker-channel-feedbackWhat is wrong with it.picker-channel-fieldThe row: the control and its readout.picker-channel-hintHelp under the track, while nothing is wrong.picker-channel-labelThe question, over the track.picker-channel-markerOne mark.picker-channel-marker-labelThe value a mark stands at, when `marker-labels` is set.picker-channel-markersThe row of marks along the track.picker-channel-outputThe current value, shown beside it.picker-channelsThe ramps beside it.picker-controlsThe row under the square.picker-eyedropperThe control that samples a color from the screen.picker-eyedropper-buttonThe inner control.picker-footerThe row holding the value and the tools.picker-formatThe control that changes the syntax the value is written in.picker-format-buttonThe inner control.picker-gridThe saturation and brightness square.picker-grid-brightnessThe range input for its vertical axis.picker-grid-handleThe mark showing where in the square the color sits.picker-grid-saturationThe range input for the square's horizontal axis.picker-iconA glyph this component draws.picker-sampleThe chip of the current color, which copies it when pressed.picker-swatchOne preset.picker-swatchesThe row of presets.picker-valueThe color as text, which can be typed or pasted.previewThe chip showing the color, inside the trigger.surfaceThe floating panel.triggerThe control that opens the panel.
CSS PropertyDescription--color-input-background-colorFill behind the field.--color-input-border-colorColor of the panel's edge.--color-input-border-widthWidth of the panel's edge. Follows `--helix-border-floating`, which is `0`, so the panel is told apart by its lift unless a theme says otherwise.--color-input-panel-sizeWidth of the panel, and so of the square.--color-input-shadowLift under the panel. Follows `--helix-shadow-floating`: a floating surface sits over content nobody can predict, so it keeps a lift by default.--color-input-swatchThe chosen color, to paint over the transparency check.--color-input-swatch-radiusCorner radius of that block.--color-input-swatch-sizeEdge length of the block in `appearance="swatch"`.
Roothelix-headless-color-inputA color, typed in any syntax or picked from a panel.
PropTypeDefaultDescriptionalphabooleanfalseWhether the color carries an alpha channel.autocompletestring"off"What the browser may autofill in the text field, as a platform token.defaultOpenbooleanfalseInitial open state for uncontrolled use, where nothing declared one.defaultValuestring""The value the markup declared, which is where a reset returns to.disabledbooleanfalseWhether the control is non-interactive.feedbackstring""What is wrong, in the reader's words rather than the browser's.formatColorFormatThe syntax the value is written in: `hex`, `rgb` or `hsl`.hintstring""Help under the control, shown while there is nothing wrong.labelstring""The accessible name, and the fallback for the `label` slot.namestring""Name submitted with the form.noFormatbooleanfalseWhether the reader may change the format from the panel.openbooleanWhether the element is open.placeholderstring"#000000"What the field says before a color is in it.requiredbooleanfalseWhether the form refuses to submit without it.swatchesstring""Colors offered under the picker, as a comma-separated list.triggerLabelstring"Choose a color"Accessible name for the control that opens the panel.valuestringWhat the control holds now, and what its form submits.variant"swatch"Whether the field is a text box with a swatch on it, or only the swatch.
ReadTypeDescriptionformHTMLFormElement|nullThe form this control belongs to, if any.labelsNodeListLabels associated with this control.whenSettledPromise<void>Resolves a frame after the first update, when transitions are switched on.
SlotDescriptionendContent at the trailing end, before the trigger.feedbackWhat is wrong with it.hintHelp under the field.startContent at the leading end of the field, inside its border.triggerThe mark on the field saying a panel opens.
EventTypeDescriptionchangeEventAnnounced once the value has moved.helix-before-changeHelixBeforeChangeEventFired before the color changes. Cancelable: refusing it takes the decision and nothing moves.helix-before-closeHelixBeforeCloseEventFired before it closes. Cancelable: refusing it takes the decision and nothing moves.helix-before-openHelixBeforeOpenEventFired before the panel opens. Cancelable: refusing it takes the decision and nothing moves.inputEventAnnounced once the value has moved.toggleEventSays the state moved, carrying `newState` and `oldState`.
MethodTypeDescriptionfocus(options: FocusOptions) => voidPuts the caret in the field, the way a label pointing at one would.requestOpen(next: boolean) => booleanRequests an open-state change, and reports whether it was applied.requestValue(next: string) => booleanRequests a new value, and reports whether the request stood.toggleOpen() => booleanRequests the opposite of the current state.
PartDescriptioncontrolThe text input carrying the value. Absent in `swatch`.feedbackWhat is wrong with it.fieldThe box holding the text and the trigger.hintHelp under the field, while nothing is wrong.labelThe question, over the field.pickerThe color picker inside it.picker-actionsThe group holding the eyedropper and the syntax toggle.picker-channelOne ramp.picker-channel-controlThe range input.picker-channel-feedbackWhat is wrong with it.picker-channel-fieldThe row: the control and its readout.picker-channel-hintHelp under the track, while nothing is wrong.picker-channel-labelThe question, over the track.picker-channel-markerOne mark.picker-channel-marker-labelThe value a mark stands at, when `marker-labels` is set.picker-channel-markersThe row of marks along the track.picker-channel-outputThe current value, shown beside it.picker-channelsThe ramps beside it.picker-controlsThe row under the square.picker-eyedropperThe control that samples a color from the screen.picker-eyedropper-buttonThe inner control.picker-footerThe row holding the value and the tools.picker-formatThe control that changes the syntax the value is written in.picker-format-buttonThe inner control.picker-gridThe saturation and brightness square.picker-grid-brightnessThe range input for its vertical axis.picker-grid-handleThe mark showing where in the square the color sits.picker-grid-saturationThe range input for the square's horizontal axis.picker-iconA glyph this component draws.picker-sampleThe chip of the current color, which copies it when pressed.picker-swatchOne preset.picker-swatchesThe row of presets.picker-valueThe color as text, which can be typed or pasted.previewThe chip showing the color, inside the trigger.surfaceThe floating panel.triggerThe control that opens the panel.
CSS PropertyDescription--color-input-swatchThe chosen color, to paint over the transparency check.
ExamplesNameDescriptionAlphaA color with an opacity, in a syntax that can carry one.DisabledDisabled, with the swatch still showing the value.EventsA field and the picker it opens, which announce as two things because they are.InvalidA color the field will not accept, and what it says about it.PreviewA field with a swatch that opens a picker.PreviewA field with a swatch that opens a picker.Raw ValueThe value left exactly as written, for a field feeding something that parses it itself.SwatchThe swatch alone, for a toolbar with no room for a field.SwatchesA set of colors offered before the picker.